<template>
  <div>
    <Loading v-if="loading" />
    <h3 v-else>{{ title }}</h3>
    <BookList :list="books" v-if="books.length" />
    <h1>{{ message }}</h1>
    <div class="footer">
      <el-config-provider :locale="locale">
        <!-- 当只有一页时隐藏分页
             当pageSize改变时触发
             设置每页显示条数的选项
             当前页发生改变触发
             当前页数
             每页显示条数
             设置组件布局
             总条目数 -->
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          :page-sizes="[2, 10, 20, 40]"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-config-provider>
    </div>
  </div>
</template>

<script>
import BookList from "@/components/Books/BookList";
import Loading from "@/components/Books/Loading.vue";
import { ElConfigProvider } from "element-plus/lib/components";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
  name: "Books",
  data() {
    return {
      title: "",
      books: [],
      message: "",
      loading: true,
      total: 5,
      pageNum: 1,
      pageSize: 2,
      locale: zhCn,
    };
  },
  components: {
    BookList,
    Loading,
    ElConfigProvider,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.title = to.meta.title;
      let url = vm.setRequestUrl(to.fullPath);
      vm.getBooks(url, vm.pageNum, vm.pageSize);
    });
  },

  beforeRouteUpdate(to) {
    let url = this.setRequestUrl(to.fullPath);
    this.getBooks(url, this.pageNum, this.pageSize);
    return true;
  },

  methods: {
    getBooks(url, pageNum, pageSize) {
      this.message = "";
      // get请求增加两个参数pageNum和pageSize
      this.axios
        .get(url, { params: { pageNum, pageSize } })
        .then((response) => {
          if (response.data.code == 200) {
            this.loading = false;
            this.books = response.data.data;
            this.total = response.data.total;
            if (this.books.length === 0) {
              if (this.$route.name === "catrgory")
                this.message = "当前分类下没有图书！";
              else this.message = "没有搜索到匹配的图书！";
            }
          }
        })
        .catch((error) => alert(error));
    },

    // 动态设置服务端数据接口的请求Url
    setRequestUrl(path) {
      let url = path;
      if (path.indexOf("/category") != -1) {
        url = "/book" + url + "/page";
      }
      return url;
    },
    // 当修改了每页显示地条数时，重新请求数据
    handleSizeChange(selectedSize) {
      this.pageSize = selectedSize;
      let url = this.setRequestUrl(this.$route.fullPath);
      this.getBooks(url, this.pageNum, this.pageSize);
    },
    // 当用户切换而选择了某一页时，重新请求数据
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      let url = this.setRequestUrl(this.$route.fullPath);
      this.getBooks(url, this.pageNum, this.pageSize);
    },
  },
};
</script>
<style scoped>
.footer,
h1,
h3 {
  text-align: center;
}
</style>
